import React, { Component } from 'react'
import { Button, Form, Input ,Toast} from 'antd-mobile'
import Headers from '../../components/Header/Header.jsx'
import { reqRegister } from '../../request/api.js'
import logo from '../../assets/img/login_logo.png'
import './Register.less'

export default class Register extends Component {
  constructor() {
    super()
    this.state = {
      user: {
        phone: '',
        nickname: '',
        password: ''
      }
    }
  }
  render() {
    // {...this.props}
    let { user } = this.state;
    return (
      <div className='register'>
        <Headers title="注册" back ></Headers>
        <div>{JSON.stringify(user)}</div>
        <div className='form'>
          <div className='logo'>
            <img src={logo} alt="" />
            </div>
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='phone'>
            <Input placeholder='请输入手机号' clearable onChange={(e) => this.changeUser(e, 'phone')} />
          </Form.Item>
          <Form.Item label='昵称' name='nickname'>
            <Input placeholder='请输入昵称' clearable onChange={(e) => this.changeUser(e, 'nickname')}/>
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password' onChange={(e) => this.changeUser(e, 'password')}/>
          </Form.Item>
        </Form>
        <div className='text-center'>
          <Button color="primary" onClick={() => this.register()}>注册</Button>
        </div>
        </div>
      </div>
    )
  }
  changeUser(e, key) {
    // console.log(e,key)
    this.setState({
      user: {
        ...this.state.user,
        [key]: e
      }
    })
  }
  register() {
    reqRegister(this.state.user).then(res => {
if(res.data.code==200){
  // 注册成功
  Toast.show({
    content:res.data.msg
  })
  // 跳转登录
  this.props.history.push('/login');
}else{//注册失败
  Toast.show({
    content:res.data.msg
  })
}
    })
  }
}
